<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/all.min.css">
    <title>题目管理</title>
    <style>
       body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 苹果系统字体 */
    }
    .content {
        padding: 20px;
    }
       .pagination {
           display: flex;
           justify-content: center; /* 居中对齐 */
           padding: 10px 0; /* 上下内边距 */
           list-style: none; /* 移除默认列表样式 */
       }

       .pagination li {
           margin: 0 5px; /* 每个分页项之间的间距 */
       }

       .pagination a, .pagination span {
           display: inline-block;
           padding: 8px 12px; /* 内边距 */
           border: 1px solid #007bff; /* 边框颜色 */
           border-radius: 4px; /* 圆角 */
           color: #007bff; /* 链接颜色 */
           text-decoration: none; /* 移除下划线 */
           transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
       }

       .pagination a:hover {
           background-color: #007bff; /* 悬停时背景颜色 */
           color: #ffffff; /* 悬停时字体颜色 */
       }

       .pagination .active span {
           background-color: #007bff; /* 当前页的背景颜色 */
           color: #ffffff; /* 当前页的字体颜色 */
           border: 1px solid #007bff; /* 边框颜色 */
       }

       .pagination .disabled span {
           color: #6c757d; /* 禁用状态的字体颜色 */
           border: 1px solid #6c757d; /* 禁用状态的边框颜色 */
           cursor: not-allowed; /* 禁用状态的光标样式 */
       }
    </style>
</head>
<body>
    <div class="content">
        <h2>题目列表</h2>
        <div class="form-row mb-1">
           <form method="get" action="">
               <div class="form-row mb-3">
                   <div class="col-auto">
                       <select class="form-control form-control-sm" name="category" id="categorySelect">
                           <option value="">所有分类</option>
                           <option value="标准版" {if condition="$data.category eq '标准版'"}selected {/if}>标准版</option>
                           <option value="专业版" {if condition="$data.category eq '专业版'"}selected {/if}>专业版</option>
                           <option value="完整版" {if condition="$data.category eq '完整版'"}selected {/if}>完整版</option>
                       </select>
                   </div>
                   <div class="col-auto">
                       <input class="form-control form-control-sm" id="searchInput" placeholder="输入题目名称" name="question" value="{$data.question}" type="text">
                   </div>
                   <div class="col-auto">
                       <input type="submit" class="form-control form-control-sm btn btn-primary"   placeholder="搜索" value="搜索" >
                   </div>
               </div>
           </form>
        </div>
        </div>
            <div id="iframeContainer" style="display:none; position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
            <button class="btn btn-danger" style="position: absolute; top: 10px; right: 10px;" onclick="closeAddNewsIframe()">
                <i class="fas fa-times"></i>
            </button>
            <iframe id="addNewsIframe" style="width: 780px; height: 600px; border: none;"></iframe>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>题目</th>
                    <th>选项A</th>
                    <th>选项B</th>
                    <th>分类</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="questionTableBody">
            {volist name="$list" id="vo"}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo.question}</td>
                    <td>{$vo.option_a}</td>
                    <td>{$vo.option_b}</td>
                    <td>{$vo.category}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" onclick="openEditNewsIframe('{$vo.id}')">编辑</button>
                    </td>
                </tr>

            {/volist}
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                {$list|raw}
                <b style="margin-top: 20px;margin-left: 10px;">总数：{$list->total()}</b>
            </ul>
        </nav>
    </div>

</body>

<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
 function closeAddNewsIframe() {
            const iframe = document.getElementById('addNewsIframe');
            iframe.style.display = 'none';
            document.getElementById('iframeContainer').style.display = 'none';
            // 刷新父页面的列表
            // window.parent.location.reload();
            // 关闭 iframe
            // window.parent.closeAddNewsIframe();
            location.reload(); 
        }
   function openEditNewsIframe(id) {
            const iframe = document.getElementById('addNewsIframe');
            iframe.style.display = 'block';
            iframe.src = '/admins/topic/edit?id='+id; // 替换为你的添加资讯表单页面路径
            document.getElementById('iframeContainer').style.display = 'block';
        }
</script>
</html>